<template>
    <div>
        <!-- 管理员订单管理：增加获取管理员订单 -->
        <el-card> 管理员处理领养申请 </el-card>

        <el-card class="list">
            <el-table :data="currentPageData" border style="width: 100%" class="table">
                <el-table-column prop="adopterId" label="领养人ID" />
                <el-table-column prop="petName" label="宠物名字" />
                <el-table-column prop="adopterAddress" label="领养人地址" />
                <el-table-column prop="deposit" label="押金" />
                <el-table-column prop="reason" label="领养原因" />
                <el-table-column label="领养证明">
                    <template #default="scope">
                        <div v-for="(url, index) in scope.row.imageUrls" :key="index" class="image-container">
                            <img :src="url" alt="宠物图片" class="pet-image" />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="orderStatus" label="订单状态" />
                <el-table-column prop="createTime" label="创建时间">
                    <template #default="scope">
                        {{ scope.row.createTime ? scope.row.createTime.replace("T", " ") : "" }}
                    </template>
                </el-table-column>

                <!-- 操作列 -->
                <el-table-column label="操作" min-width="100px">
                    <template #default="scope">
                        <el-button type="primary" plain size="small" @click="handleAgree(scope.row)"> 通过 </el-button>
                        <el-button type="primary" plain size="small" @click="handleReject(scope.row)"> 拒绝 </el-button>
                        <el-button
                            type="primary"
                            plain
                            size="small"
                            @click="
                                handleSend(scope.row);
                                dialogFormVisible = true;
                            "
                        >
                            发货
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页器组件 -->
            <el-pagination
                class="mt-4"
                background
                layout="total, sizes, prev, pager, next, jumper"
                :current-page="currentPage"
                :page-sizes="[8, 10, 15]"
                :page-size="pageSize"
                :total="adminOrderList.length"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </el-card>

        <!-- 编辑表单 -->
        <el-dialog v-model="dialogFormVisible" title="发货表单" width="500">
            <!-- 只读 -->
            <el-form-item label="订单ID" :label-width="formLabelWidth">
                <el-input v-model="form.orderId" disabled placeholder="系统自动填充" />
            </el-form-item>

            <el-form :model="form">
                <el-form-item label="物流编号" :label-width="formLabelWidth">
                    <el-input v-model="form.deliveryNum" autocomplete="off" />
                </el-form-item>
            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button
                        @click="
                            resetUpload();
                            dialogFormVisible = false;
                        "
                        >取消</el-button
                    >
                    <el-button
                        type="primary"
                        @click="
                            dialogFormVisible = false;
                            ConfirmBtn();
                        "
                        >确认</el-button
                    >
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { getAdminOrderListAPI, AdoptApplicationYesAPI, AdoptApplicationNoAPI, putSendAPI } from "@/api/order";
import { onMounted, ref, computed, reactive } from "vue";
import { ElMessage, ElPagination } from "element-plus";

const adminOrderList = ref([]); // 全部订单数据
const currentPage = ref(1); // 当前页码
const pageSize = ref(8); // 每页显示条数

// 计算当前页要显示的数据
const currentPageData = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return adminOrderList.value.slice(start, end);
});

// 获取全部订单数据
const getAdminOrderList = async () => {
    const res = await getAdminOrderListAPI();
    adminOrderList.value = res.data.items;
};

// 处理每页条数变化
const handleSizeChange = (newSize: number) => {
    pageSize.value = newSize;
    currentPage.value = 1; // 重置为第一页
};

// 处理页码变化
const handleCurrentChange = (newPage: number) => {
    currentPage.value = newPage;
};

// 通过按钮-表示通过领养审核
const handleAgree = async (row: any) => {
    console.log("通过:", row.id);
    //调用申请通过接口
    const res = await AdoptApplicationYesAPI(row.id);
    console.log(res);
    if (res.message === "成功") {
        ElMessage.success("该宠物的领养申请已通过");
        // 刷新数据
        getAdminOrderList();
    } else {
        ElMessage.error("操作失败");
    }
};

// 拒绝按钮-表示不通过领养审核
const handleReject = async (row: any) => {
    console.log("拒绝:", row.id);
    // 调用申请不通过接口
    const res = await AdoptApplicationNoAPI(row.id);
    console.log(res);
    if (res.message === "成功") {
        ElMessage.error("该宠物的领养申请已拒绝");
        // 刷新数据
        getAdminOrderList();
    } else {
        ElMessage.error("操作失败");
    }
};

const formLabelWidth = "180px"; //输入框标题宽度
const dialogFormVisible = ref(false);
// 表单数据存储
const form = reactive({
    orderId: "", //发货订单ID
    deliveryNum: "", //物流编号
});

const resetUpload = () => {
    (form.orderId = ""), (form.deliveryNum = "");
};
// 发货按钮
const handleSend = (row) => {
    // console.log("待发货的ID:", row.id)
    form.orderId = row.id;
};

// 确认发货-调用发货接口
const ConfirmBtn = async () => {
    // console.log("确认发货,表单数据：", form)

    // 物流编号不能为空
    if (form.deliveryNum) {
        // 调用发货接口
        const res = await putSendAPI(form.orderId, form.deliveryNum);
        console.log(res);
        if (res.message === "成功") {
            ElMessage.success("发货成功");
        } else {
            ElMessage.error("发货失败");
        }
    } else {
        ElMessage.warning("物流编号不能为空");
    }
};
onMounted(() => {
    getAdminOrderList();
});
</script>

<style scoped>
.list {
    margin-top: 20px;
}

.table {
    margin-bottom: 20px;
}

.image-container {
    display: inline-block;
    margin-right: 3px;
    max-width: 100px;
    max-height: 70px;
    overflow: hidden;
}

.pet-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>
